/* fonts stylesheet */
@import url('fonts/stylesheet.css');

/**
 * The following are all css rules which override the default colour styles set in style-base.css.
 * To use, set one of the following classes (colour themes) to the <body> tag:
 *
 * Colours are defined and obtained from the colour-list.less file
 *
 * - .twlsky-red [DEFAULT]
 * - .twlsky-orange
 * - .twlsky-yellow
 * - .twlsky-green
 * - .twlsky-blue
 * - .twlsky-pink
 */
// Colours are defined and obtained from the colour-list.less file

@prefix: "twlsky-";

// ========== GET COLOURS from colour-list.less =============
@import url('colour-list.less');

// ========== FOR EACH COLOUR =============
.for-each-colour(@colours-total, @i: 1) when (@i =< @colours-total) {
    @colour-name: e(extract(@colours-list, @i)); // returns: red
    @pre: e("@{prefix}@{colour-name}"); // returns: twlsky-red
    @colour-definition-title: e("colour-@{colour-name}"); // returns: colour-red
    @colour: @@colour-definition-title; // returns: #fd1c36

    // ==========================================================
    // START: RULES FOR EACH COLOUR  
    // ==========================================================

    /* ============================================================ */

    .@{pre} a:hover { color: @colour; }

    .@{pre} .btn-outline-inverse:hover,
    .@{pre} .btn-outline-inverse:focus,
    .@{pre} .btn-outline-inverse:active {
        color:#fff;
        background-color: @colour;
        border-color: @colour;
    }

    .@{pre} .btn-theme {
        color: #fff;
        background: @colour;
        border-color: @colour;
    }
    .@{pre} .btn-theme:hover,
    .@{pre} .btn-theme:focus,
    .@{pre} .btn-theme:active {
        color: #fff;
        background-color: darken(@colour, 10%);
        border-color: darken(@colour, 10%);
    }  

    .@{pre} .btn-link:hover {
        color:@colour !important;
    }  

    .@{pre} header #main-menu-container #mobile-menu-icon:hover,
    .@{pre} header #main-menu-container #mobile-menu-icon.active {
        background: @colour;
        border-color: @colour;
    }

    .@{pre} header #main-menu-container #main-menu li.menu-item > a:hover,
    .@{pre} header #main-menu-container #main-menu li.menu-item.current-menu-item > a,
    .@{pre} header #main-menu-container #main-menu li.menu-item.active > a,
    .@{pre} header #main-menu-container #main-menu li.menu-item.current-menu-ancestor > a {
        background: @colour;
    }  

    .@{pre} header #main-menu-container #main-menu li.menu-item .sub-menu li.menu-item > a:hover,
    .@{pre} header #main-menu-container #main-menu li.menu-item .sub-menu li.menu-item.current-menu-item > a,
    .@{pre} header #main-menu-container #main-menu li.menu-item .sub-menu li.menu-item.active > a,
    .@{pre} header #main-menu-container #main-menu li.menu-item .sub-menu li.menu-item.current-menu-ancestor > a {
       background: @colour; 
    } 

    @media (min-width: 768px) {
        .@{pre} header #main-menu-container #main-menu > li.menu-item > a:hover,
        .@{pre} header #main-menu-container #main-menu > li.menu-item.current-menu-item > a,
        .@{pre} header #main-menu-container #main-menu > li.menu-item.active > a,
        .@{pre} header #main-menu-container #main-menu > li.menu-item.current-menu-ancestor > a {
            background:transparent;
            border-color: @colour; 
        } 

        // ====================== Start: DROPDOWN MENUS ARROWS =======================
        .@{pre} header #main-menu-container #main-menu > li.menu-item > .sub-menu .sub-menu.menu_on_the_right:after,
        .@{pre} header #main-menu-container #main-menu > li.menu-item > .sub-menu .sub-menu.menu_on_the_left:after,
        .@{pre} header #main-menu-container #main-menu > li.menu-item > .sub-menu .sub-menu.menu_on_the_right:before,
        .@{pre} header #main-menu-container #main-menu > li.menu-item > .sub-menu .sub-menu.menu_on_the_left:before {
            border-right-color: fade(@colour, 70%);
        }
        .@{pre} header #main-menu-container #main-menu > li.menu-item > .sub-menu .sub-menu.menu_on_the_right:before,
        .@{pre} header #main-menu-container #main-menu > li.menu-item > .sub-menu .sub-menu.menu_on_the_left:before {
            border-right-color: #fff;
        }
        .background-dark.@{pre} header #main-menu-container #main-menu > li.menu-item > .sub-menu .sub-menu.menu_on_the_right:before,
        .background-dark.@{pre} header #main-menu-container #main-menu > li.menu-item > .sub-menu .sub-menu.menu_on_the_left:before {
            border-right-color: #171717;
        }
        .@{pre} header #main-menu-container #main-menu > li.menu-item > .sub-menu .sub-menu.menu_on_the_left:after,
        .@{pre} header #main-menu-container #main-menu > li.menu-item > .sub-menu .sub-menu.menu_on_the_left:before {
            border-left-color: fade(@colour, 70%);
        } 
        .@{pre} header #main-menu-container #main-menu > li.menu-item > .sub-menu .sub-menu.menu_on_the_left:before {
            border-left-color: #fff;
        }
        .background-dark.@{pre} header #main-menu-container #main-menu > li.menu-item > .sub-menu .sub-menu.menu_on_the_left:before {
            border-left-color: #171717;
        }
        // ====================== End: DROPDOWN MENUS ARROWS =======================  

        .@{pre} header #main-menu-container #main-menu li.menu-item .sub-menu li.menu-item > a:hover,
        .@{pre} header #main-menu-container #main-menu li.menu-item .sub-menu li.menu-item.current-menu-item > a,
        .@{pre} header #main-menu-container #main-menu li.menu-item .sub-menu li.menu-item.active > a,
        .@{pre} header #main-menu-container #main-menu li.menu-item .sub-menu li.menu-item.current-menu-ancestor > a {
            color: #1d1d1d !important;
            background: fade(@colour, 40%);
        }

        .@{pre} .background-dark header #main-menu-container #main-menu li.menu-item .sub-menu li.menu-item > a:hover,
        .@{pre} .background-dark header #main-menu-container #main-menu li.menu-item .sub-menu li.menu-item.current-menu-item > a,
        .@{pre} .background-dark header #main-menu-container #main-menu li.menu-item .sub-menu li.menu-item.active > a,
        .@{pre} .background-dark header #main-menu-container #main-menu li.menu-item .sub-menu li.menu-item.current-menu-ancestor > a {
            color:#fff !important;
        }            
    } 

    .@{pre} #top-banner.carousel-container .owl-wrapper-outer,
    .@{pre} #top-banner .full-width-image {
        border-color: @colour;
    }

    .@{pre} .owl-carousel .item a.text.bottom-full-width:hover {
        background: @colour;
    }       

    .@{pre} .owl-carousel .item .text > a:hover {
        background: @colour;
    }
    .@{pre} .owl-carousel .item .text.bottom-full-width > *:hover {
        background:transparent;
    }

    .@{pre} .nav-pills > li.active > a, 
    .@{pre} .nav-pills > li.active > a:hover, 
    .@{pre} .nav-pills > li.active > a:focus {
        color: #fff;
        background-color: @colour;
    }   

    .@{pre} .nav .open > a, 
    .@{pre} .nav .open > a:hover, 
    .@{pre} .nav .open > a:focus {
        background-color: #eee;
        border-color: @colour;
    }  

    .@{pre} .pagination > li > a:hover, 
    .@{pre} .pagination > li > span:hover, 
    .@{pre} .pagination > li > a:focus, 
    .@{pre} .pagination > li > span:focus {
        color: #fff;
        background-color: @colour;
        border-color: @colour;
    }    

    .@{pre} .pagination>.disabled>span, .@{pre} .pagination>.disabled>span:hover, .@{pre} .pagination>.disabled>span:focus, .@{pre} .pagination>.disabled>a, .@{pre} .pagination>.disabled>a:hover, .@{pre} .pagination>.disabled>a:focus {
    color: #999;
    background-color: #fff;
    border-color: #ddd;
    cursor: not-allowed;
    } 

    .@{pre} .pagination > .active > a, 
    .@{pre} .pagination > .active > span, 
    .@{pre} .pagination > .active > a:hover, 
    .@{pre} .pagination > .active > span:hover, 
    .@{pre} .pagination > .active > a:focus, 
    .@{pre} .pagination > .active > span:focus {
        color: #fff;
        background-color: @colour;
        border-color: @colour;
    }    

    .@{pre} .pager li > a:hover, 
    .@{pre} .pager li > a:focus {
        color:#fff;
        background-color: @colour;
    }   

    .@{pre} .pager .disabled>a, .@{pre} .pager .disabled>a:hover, .@{pre} .pager .disabled>a:focus, .@{pre} .pager .disabled>span {
        color: #999;
        background-color: #fff;
        cursor: not-allowed;
    }      

    .@{pre} a.thumbnail:hover, 
    .@{pre} a.thumbnail:focus, 
    .@{pre} a.thumbnail.active {
        border-color: @colour;
    } 

    .@{pre} a.list-group-item.active, 
    .@{pre} a.list-group-item.active:hover, 
    .@{pre} a.list-group-item.active:focus {
        background-color: @colour;
        border-color: @colour;
    } 

    .@{pre} .dropdown-menu > .active > a, 
    .@{pre} .dropdown-menu > .active > a:hover, 
    .@{pre} .dropdown-menu > .active > a:focus {
        color: #fff;
        background-color: @colour;
    }   

    .@{pre} .section-header.with-icon .icon {
        background:@colour;
    }  
    .@{pre} .section-header.with-icon:hover .icon {
        background-color:darken(@colour, 10%);
    }

    .@{pre} .section-header:hover .text {
        color:@colour;
    }  

    .@{pre} .section-container .section-content .vertical-simple-list .item .item-content:hover .date {
        background:@colour; 
    }

    .@{pre} .section-container .section-content .thumbnail-list > .item .thumbnail .date { 
        background:@colour;
    } 

    .@{pre} .section-container.main-page-content .section-content .thumbnail-list > .item .thumbnail .title a:hover {
        color:@colour;
    }  

    .@{pre} .section-container .section-content .thumbnail-list > .item .thumbnail .icon:hover .glyphicon,
    .@{pre} .section-container .section-content .thumbnail-list > .item .thumbnail .icon:hover .fa {
        color:@colour;
    }
    .@{pre} .section-container .section-content .thumbnail-list > .item.icon-w-bg .thumbnail .icon:hover .glyphicon,
    .@{pre} .section-container .section-content .thumbnail-list > .item.icon-w-bg .thumbnail .icon:hover .fa {
        background:@colour;
        color: #fff;
    } 

    .@{pre} .section-container .section-content .thumbnail-list.with-text-mask > .item .thumbnail .text-mask {
        background:@colour;
        background:fade(@colour, 80%);
    }

    .@{pre} .text-mask {
        background:@colour;
        background:fade(@colour, 80%);
    }

    .@{pre} .section-container .section-content .horizontal-news-list > .item .item-content:hover .date {
        background:@colour;
    }     

    .@{pre} .section-container .section-content .vertical-news-list > .item .item-content:hover .date {
        background:@colour;
    }   

    .@{pre} .section-container .section-content .gallery-grid > .gallery-item .mask {
        background:@colour;
        background:fade(@colour, 70%);
    }

    .@{pre} .section-container .section-content .blog-tag-list > li a:hover {
        color: #fff;
        background-color: @colour;
        border-color: @colour;
    }     

    .@{pre} .section-container .section-content .media-list > .media .inline-date {
        background:@colour;
    }

    .@{pre} .section-container .section-content .media-list > .media:hover .date {
        background:@colour;
    }

    .@{pre} .section-container .section-content .media-list .play-icon {
        border:1px solid @colour;
        color:@colour;
    }
    .@{pre} .section-container .section-content .media-list .play-icon:hover {
        background:@colour;
        color:#fff;
    }    

    .@{pre} *[class*="img-mask-effect"] .mask {
        background:@colour;
        background:fade(@colour, 70%);
    } 

    .@{pre} .img-mask-effect.bottom-caption {
        background:@colour;
    }

    .@{pre} .img-mask-effect.bottom-caption .mask {
        background:@colour;   
    }      

    .@{pre}.loader-bar .pace .pace-progress,
    .@{pre}.loader-corner .pace .pace-activity {
        background: @colour;
    }    

    .@{pre} .slider-arrows > .arrow:hover {
        color: @colour;
    }  

    .@{pre} .blog-article .meta a:hover { 
        color: @colour;
    } 

    .@{pre} .blog-articles-container.full-width .blog-article .feature-image.full-width-image img { 
        border-color:@colour;
    }   

    .@{pre} .form-control:focus {
        border-color: @colour;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px fade(@colour, 60%);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px fade(@colour, 60%);
    }

    .@{pre} .comments-list > .media .media-footer a:hover { 
        color:@colour;
    }

    .@{pre} #toggle-comment-form:hover .glyphicon,
    .@{pre} #toggle-comment-form:hover .fa {
        color:@colour;
    }

    .@{pre} #go-to-top:hover {
        border-color:@colour;
        background:@colour;
        color:#fff;
    }

    .@{pre} .section-container .section-content .sidebar-menu li.menu-item:hover,
    .@{pre} .section-container .section-content .sidebar-menu li.menu-item.active,
    .@{pre} .section-container .section-content .sidebar-menu li.menu-item.current-menu-ancestor {
        background:fade(@colour, 5%)
    }

    .@{pre} .section-container .section-content .sidebar-menu li.menu-item a:hover,
    .@{pre} .section-container .section-content .sidebar-menu li.menu-item.current-menu-item > a,
    .@{pre} .section-container .section-content .sidebar-menu li.menu-item.active > a,
    .@{pre} .section-container .section-content .sidebar-menu li.menu-item.current-menu-ancestor > a {
        background:@colour;
        color:#fff;
    }

    .@{pre} .social-media-icons > li > *:hover,
    .@{pre} #beneath-footer .social-media-icons > li > *:hover {
        color:#fff;
        border-color:@colour;
        background:@colour;
    }

    .@{pre} .page-not-found-container .content-404 .glyphicon,
    .@{pre} .page-not-found-container .content-404 .fa {
        color:@colour;
    }

    .@{pre} .breadcrumbs > li > *:hover,
    .@{pre} .breadcrumb > li > *:hover {
        color:@colour;
    }

    .@{pre} header #main-menu-container #search-container #search-input #search-close:hover {
        color:@colour;
    }
    .@{pre} header #main-menu-container #search-container #search-icon:hover,
    .@{pre} header #main-menu-container #search-container #search-icon.active {
        color:@colour;
    }

    .@{pre} .pagination-container .pagination-list > li > *:hover,
    .@{pre} .pagination-container .pagination-list > li.active > * {
        background:@colour;
        border-color:@colour;
    }

    // ==========================================================
    // END: RULES FOR EACH COLOUR  
    // ==========================================================    

    .for-each-colour(@colours-total, (@i + 1));
}
.for-each-colour(@colours-total);
// ========== END: FOR EACH COLOUR =============